<template>
  <div class="register-container">
    <div class="navbar">
      <router-link to="/login" class="navbar-back">
        <i class="fas fa-arrow-left nav-icon"></i>
      </router-link>
      <div class="navbar-title">创建新账户</div>
      <div style="width: 24px;"></div>
    </div>

    <div class="register-header">
      <h1 class="register-title">欢迎加入宠物乐园</h1>
      <p class="register-subtitle">请填写以下信息完成注册</p>
    </div>

    <div class="register-form">
      <div v-if="errorMessage" class="error-message mb-20">{{ errorMessage }}</div>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label class="form-label" for="username">用户名</label>
          <input type="text" id="username" v-model="username" class="form-input" placeholder="请设置用户名"
            :disabled="loading">
        </div>

        <div class="form-group">
          <label class="form-label" for="email">电子邮箱</label>
          <input type="email" id="email" v-model="email" class="form-input" placeholder="请输入电子邮箱"
            :disabled="loading">
        </div>

        <div class="form-group">
          <label class="form-label" for="phone">手机号</label>
          <input type="tel" id="phone" v-model="phone" class="form-input" placeholder="请输入手机号码" :disabled="loading">
        </div>

        <div class="form-group">
          <label class="form-label" for="password">密码</label>
          <input type="password" id="password" v-model="password" class="form-input" placeholder="请设置登录密码"
            :disabled="loading">
        </div>

        <div class="form-group">
          <label class="form-label" for="confirm-password">确认密码</label>
          <input type="password" id="confirm-password" v-model="confirmPassword" class="form-input"
            placeholder="请再次输入密码" :disabled="loading">
        </div>

        <div class="terms-agreement">
          <label class="flex items-start">
            <input type="checkbox" v-model="agreement" class="mt-1 mr-2" :disabled="loading">
            <span>
              我已阅读并同意
              <a href="#" class="text-primary">《用户服务协议》</a>和
              <a href="#" class="text-primary">《隐私政策》</a>
            </span>
          </label>
        </div>

        <button type="submit" class="btn btn-primary btn-block" :disabled="loading">
          {{ loading ? '注册中...' : '注册' }}
        </button>
      </form>

      <div class="login-link">
        <p>已有账户? <router-link to="/login">立即登录</router-link></p>
      </div>
    </div>
  </div>
</template>

<script>
// 导入API服务
import api from '@/network/api';

export default {
  name: 'RegisterView',
  data() {
    return {
      username: '',
      email: '',
      phone: '',
      password: '',
      confirmPassword: '',
      agreement: false,
      loading: false,
      errorMessage: ''
    }
  },
  methods: {
    async handleRegister() {
      // 表单验证
      if (!this.username) {
        this.errorMessage = '请设置用户名';
        return;
      }

      if (!this.email) {
        this.errorMessage = '请输入电子邮箱';
        return;
      }

      // 邮箱格式验证
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.errorMessage = '请输入正确的电子邮箱';
        return;
      }

      if (!this.phone) {
        this.errorMessage = '请输入手机号';
        return;
      }

      // 手机号格式验证
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.phone)) {
        this.errorMessage = '请输入正确的手机号码';
        return;
      }

      if (!this.password) {
        this.errorMessage = '请设置密码';
        return;
      }

      if (this.password !== this.confirmPassword) {
        this.errorMessage = '两次输入的密码不一致';
        return;
      }

      if (!this.agreement) {
        this.errorMessage = '请阅读并同意用户服务协议和隐私政策';
        return;
      }

      try {
        this.loading = true;
        this.errorMessage = '';

        // 调用注册API，根据后端接口调整
        const response = await api.register({
          username: this.username,
          email: this.email,
          phone: this.phone,
          passwordHash: this.password // 后端名称是passwordHash，但前端还是传password，后端会处理哈希
        });

        console.log('注册成功:', response);

        // 注册成功后跳转到登录页面
        this.$router.push('/login');
      } catch (error) {
        console.error('注册失败:', error);
        this.errorMessage = error.response?.data?.message || '注册失败，请稍后再试';
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8fafc;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.navbar-back {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
}

.nav-icon {
  color: #2d3748;
}

.register-header {
  padding: 30px 20px 10px;
  text-align: center;
}

.register-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
}

.register-subtitle {
  font-size: 14px;
  color: #718096;
  margin-bottom: 20px;
}

.register-form {
  padding: 0 20px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #4a5568;
  text-align: left;
}

.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background-color: white;
  transition: border-color 0.2s;
  text-align: left;
}

.form-input:focus {
  border-color: #3490dc;
  outline: none;
}

.form-input:disabled {
  background-color: #f7fafc;
  cursor: not-allowed;
}

.verification-code-container {
  display: flex;
  align-items: center;
}

.verification-code-button {
  white-space: nowrap;
  padding-left: 10px;
  color: #3490dc;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
}

.verification-code-button:disabled {
  color: #a0aec0;
  cursor: not-allowed;
}

.btn {
  padding: 12px 15px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #3490dc;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #2779bd;
}

.btn-block {
  display: block;
  width: 100%;
}

.text-primary {
  color: #3490dc;
}

.mb-20 {
  margin-bottom: 20px;
}

.terms-agreement {
  margin: 20px 0;
  font-size: 14px;
  color: #718096;
  text-align: left;
}

.login-link {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  color: #718096;
  font-size: 14px;
}

.login-link a {
  color: #3490dc;
  font-weight: 500;
}

.error-message {
  background-color: #fed7d7;
  color: #c53030;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}
</style>